<template>

    <div>
        <el-table :data="tableData" style="width: 100%" @selection-change="selectchange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="fileName" label="文件名">
                <template #default="scope">
                    <div v-if="scope.row.isedit">
                        <el-input v-model="scope.row.fileName" style="width: 200px;margin-right: 10px;"
                            placeholder="请输入"></el-input>
                        <el-button type="success" @click="addfolders(scope.row)" style="margin-right: 10px;"
                            :icon="Check" circle />
                        <el-button type="success" @click="closeBold(scope.$index, scope.row)" :icon="CloseBold"
                            circle />


                    </div>
                    <div v-else style="display: flex;justify-content: space-between;">

                        <div style="cursor: pointer;display:flex"> <img
                                style="width:32px;height:32px;vertical-align:middle" v-if="scope.row.folderType == 1"
                                src="../assets/folder.png" alt="">
                            <div @click="dkwjm(scope.row)"> {{
                                scope.row.fileName }}</div>
                            <div v-if="scope.row.isediting" style="margin-left: 10px; display:flex">
                                <!-- <el-input v-model="scope.row.realName" style="width: 200px;margin-right: 10px;"
                                        placeholder="请输入"></el-input> -->
                                <el-input style="margin-right: 10px;" v-model="scope.row.realName" placeholder="请输入内容">
                                    <template #suffix>
                                        <span>{{ scope.row.suffixname }}</span>
                                    </template></el-input>
                                <el-button type="success" @click="addfolders(scope.row)" style="margin-right: 10px;"
                                    :icon="Check" circle />
                                <el-button type="success" @click="closeBold(scope.$index, scope.row)" :icon="CloseBold"
                                    circle />


                            </div>
                        </div>

                        <div class="cz">
                            <div style="display: flex;align-items: center;cursor:pointer">

                                <div v-if="scope.row.folderType == 0" @click="download(scope.row)"
                                    style="display: flex;align-items: center;cursor:pointer;margin-right: 20px;color:#409eff">

                                    <el-icon>
                                        <Download />
                                    </el-icon>
                                    下载
                                </div>

                            </div>
                        </div>
                    </div>
                </template>

            </el-table-column>

            <el-table-column prop="lastUpdateTime" label="修改时间" width="200" />
            <el-table-column prop="fileSize" label="大小" width="200">
                <template #default="scope">
                    <div v-if="scope.row.folderType == 0 && scope.row.fileSize != null">
                        {{ size.sizetoStr(scope.row.fileSize) }}
                    </div>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import size from "@/utils/utils"

import { onMounted, ref } from 'vue';
import {
    Check, CloseBold
} from '@element-plus/icons-vue'
import { useRoute } from 'vue-router';
import service from '@/utils/Request';
import router from '@/router';
const emit = defineEmits(["getlist", "getfolder", "getcurfolder", "selectchange", "move", "getFile", "share"])
const route = useRoute()
const props = defineProps(["data"])
const tableData = ref([])
const curfolder = ref(0)
const addfolder = (e) => {
    console.log(e, "ees")
    curfolder.value = e
    tableData.value.unshift({
        fileName: "",
        isedit: true
    })

}
const closeBold = (i, row) => {
    if (row.fileId) {
        row.isedit = false
    } else {
        tableData.value.splice(i, 1)
    }

}
const share = (row) => {
    emit("share", row)
    // dialogVisible3.value = true
    // ruleForm.value = row

}
const selectchange = (e) => {
    console.log(e)
    emit("selectchange", e)
}
const move = (row) => {
    emit("move", row)
}
const download = async (row) => {
    console.log(row.fileId)
    const res = await service.get("file/createDownloadUrl/" + row.fileId);
    console.log(res);
    window.location.href = "/api/file/download/" + res.data
}
const path = ref([])
const dkwjm = (row) => {
    console.log(row)

    if (row.folderType == 1) {
        // path.value.push(row.fileId)
        // router.push({
        //     path: "/index",
        //     query: {
        //         type: route.query.type,
        //         path: path.value.join("/")
        //     }
        // })

        emit("getcurfolder", row.fileId)
        emit("getfolder")
    } else {

        emit("getFile", row)

    }
}
const cmm = (row) => {
    row.fileName = row.fileName.split(".")[0]
    row.isedit = true
}
const deletes = (row) => {
    ElMessageBox.confirm(
        `是否确认删除${row.fileName}?`,
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async () => {
            let data = [];
            data.push(row.fileId)
            const res = await service.post("/file/delFile", {
                fileIds: data.join(",")
            })
            console.log(res);
            // getlist()
            emit("getlist")
            ElMessage({
                type: 'success',
                message: 'Delete completed',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
const addfolders = async (row) => {
    if (!row.fileId) {
        const res = await service.post("/file/newFolder", {
            filePid: curfolder.value,
            fileName: row.fileName
        })
        if (res.code == 1) {
            emit("getlist")
            row.isedit = false
        } else {
            ElMessage({
                type: "warning",
                message: res.msg
            })
        }
    } else {
        const res = await service.post("/file/rename", {
            fileId: row.fileId,
            fileName: row.fileName
        })
        if (res.code == 1) {
            emit("getlist")
            row.isedit = false
        } else {
            ElMessage({
                type: "warning",
                message: res.msg
            })
        }
    }


}
// emit("getlist")
const getlist = () => {

    setTimeout(() => {
        console.log(props.data, "pr")
        tableData.value = props.data;
    }, 10)

    if (route.query.path) {
        path.value = route.query.path.split("/")
    } else {
        path.value = []
    }

}
defineExpose({
    getlist,
    addfolder
})
</script>